import React from 'react';
import './static/css/App.css';
import {routers} from './router/index'
import { Suspense } from 'react';
import { BrowserRouter,Routes ,Route} from 'react-router-dom';
interface IRouter{
  path:string,
  element:JSX.Element,
  children ?:Array<IRouter>
}
function App() {
  return (

      <BrowserRouter>
        <Routes>
           {
             routers.map((item:IRouter,index:number)=>(
               <Route key={index} path={item.path} element={
                 <Suspense fallback={<div>loading.....</div>}>
                   {item.element}
                 </Suspense>
               }>
                 {
                  item.children &&
                  item.children.map((chitem:IRouter,indexs:number)=>(
                    <Route key={indexs} path={chitem.path} element={
                      <Suspense fallback={<div>loading...</div>}>
                        {chitem.element}
                      </Suspense>
                    }></Route>
                  ))
                 }

               </Route>
             ))
           }
        </Routes>
      </BrowserRouter>
  );
}

export default App;
